<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滴答办公系统-角色列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="${pageContext.request.contextPath}/media/layui/css/layui.css" ${pageContext.request.contextPath}/media="all">
<script src="${pageContext.request.contextPath}/media/js/jquery.min.js"></script>
		<script type="text/javascript">
	
		/*  //跳转页面
		function goPage(pageIndex) {
			location.href="${pageContext.request.contextPath}/role/list/"+pageIndex;
		}
		//改变页面大小
		function changePageSize(obj) {
			var page = obj.value;
			location.href="${pageContext.request.contextPath}/role/list/1?pageSize="+page;
		}
		
		//跳转指定页面
		function tiaozhuan(totalPage) {
			//获取输入框内容
			var pageIndex = $("#page").val();
			var regex = new RegExp(/^[\d]+$/);
			var bool = regex.test(pageIndex);
			if(bool){
				if(pageIndex>totalPage||pageIndex<1){
					alert("输入页码不在范围内！请重新输入~");
					$("#page").focus();
				}else{
					location.href="${pageContext.request.contextPath}/role/list/"+pageIndex;
				}
			}else{
				alert("输入不合法！请重新输入~");
				$("#page").focus();
			}
			
		}
		
		$(function() {
			$("#pageSize").val(${pageHelper.pageSize});
		}) */
		 function gopage(index) {
					location.href="${pageContext.request.contextPath}/role/show?pageindex="+index;
				}
		
	</script>
</head>
<body>
	<div class="layui-container">
			<div class="layui-btn-group">
				<button class="layui-btn layui-btn-norma" onclick="addRole()">
				<i class="layui-icon">&#xe654;</i>添加角色
			</button>
			</div>
	</div>
	<div class="layui-container">
		<table class="layui-table" id="tbdata" lay-filter="tbop">
			<thead>
				<tr>
					<td>序号</td>
					<td>角色名称</td>
					<td>角色备注</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
			   <c:forEach items="${pagebean.lis}" var="role">
				<tr>
					<td>${role.id}</td>
					<td>${role.name}</td>
					<td>${role.remake}</td>
					<td>
						<a class="layui-btn layui-btn-mini" href="#" onclick="showEdit(${role.id});">编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-mini"
						lay-event="del" onclick="deleteCourse();">删除</a>
					</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
		<div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1" style="float: right;">
				<a href="#" onclick="gopage(1);">首页</a>
				<c:if test="${pagebean.pagein!=1}">
				<a href="#" onclick="gopage(${pagebean.pagein-1});">上一页</a>
				</c:if>
				<c:forEach begin="${pagebean.start}" end="${pagebean.end}" step="1" var="i">
				<c:if test="${pagebean.pagein==i}">
				<a href="#" onclick="gopage(${i});" style="color: red;">${i}</a>
				</c:if>
				<c:if test="${pagebean.pagein!=i}">
				<a href="#" onclick="gopage(${i});">${i}</a>
				</c:if>
				</c:forEach>
				<c:if test="${pagebean.pagein!=pagebean.toalPage}">
				<a href="#" onclick="gopage(${pagebean.pagein+1});">下一页</a>
				</c:if>
				<a href="#" onclick="gopage(${pagebean.toalPage});">尾页</a>
				<span>
				[${pagebean.pagein}/${pagebean.toalPage}]页
				[${pagebean.count}]项
				</span>
						</div>
	      </div>
	
	<script src="${pageContext.request.contextPath}/media/layui/layui.js"></script>
	
	<script type="text/javascript">
	   function deleteCourse(){
		   layui.use('table', function() {
			   layer.confirm('是否确认删除角色?',function(index) {
				   layer.msg("删除成功", {icon : 6});
				   layer.msg("删除失败", {icon : 5});
			   });
		   });
	   }
	   
	   var form;
	   
	   //编辑角色
	   function showEdit(id){
		   $.get("${pageContext.request.contextPath}/role/toUpdate?rid="+id, null, function(obj) {
			   var menus=obj.menus;
			   for(var i=0;i<menus.length;i++){
				   if(menus[i].parentid==0){
					   if(menus[i].flag==true){						   
					       $("#dv_updateMenu").append("<input type='checkbox' name='menus_ids' value='"+menus[i].id+"' title='"+menus[i].name+"' checked>");
					   }else{
						   $("#dv_updateMenu").append("<input type='checkbox' name='menus_ids' value='"+menus[i].id+"' title='"+menus[i].name+"'>");
					   }
					   for(var j=0;j<menus.length;j++){
						   if(menus[j].parentid==menus[i].id){
							   if(menus[j].flag==true){
							      $("#dv_updateMenu").append("<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' name='menus_ids' value='"+menus[j].id+"' title='"+menus[j].name+"' checked>");
							   }else{
								   $("#dv_updateMenu").append("<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' name='menus_ids' value='"+menus[j].id+"' title='"+menus[j].name+"' >"); 
							   }
						   }
					   }
				   }
			   }
			   var permissions=obj.permissions;
			   for(var i=0;i<permissions.length;i++){
				   if(permissions[i].flag==true){
				       $("#dv_updatePermission").append("<input type='checkbox' name='permission_ids' value='"+permissions[i].id+"' title='"+permissions[i].name+"' checked>");
				   }else{
					   $("#dv_updatePermission").append("<input type='checkbox' name='permission_ids' value='"+permissions[i].id+"' title='"+permissions[i].name+"'>");
				   }
			   }
			   var role=obj.role;
			   $("#id_update").val(role.id);
			   $("#name_update").val(role.name);
			   $("#remark_update").val(role.remark);
			   
			   //-----------------------------------------
			   layui.use('table', function() {
					form=layui.form;
					layer.open({
						area: ['500px', '480px'],
						title: '更新角色',
						type: 1,
						content: $('#dvlay_update'), //这里content是一个普通的String
						btn: ['更新', '取消'],
						yes:function(index, layero){
							$.ajax({
								url:"${pageContext.request.contextPath}/role/update",
								type:"post",
								dataType:"json",
								data:$("#fm1_update").serialize(),  
								success:function(result){
									if(result==true){
										//layer.msg("更新成功", {icon : 6});
										alert("更新成功~~");
										window.location.reload();//刷新页面
									}else{
										layer.msg("更新失败", {icon : 5});
									}
								}
							});
							layer.close(index);//关闭窗口
						},
						cancel: function() {}
					});
		        });
			   
			   
		   });
	   }
	   
	   //弹出新增框
	   function addRole(){
		   $.get("${pageContext.request.contextPath}/role/toadd", null, function(obj) {
			   var menus=obj.menus;
			   for(var i=0;i<menus.length;i++){
				   if(menus[i].parentid==0){
					   $("#dv_addMenu").append("<input type='checkbox' name='menus_ids' value='"+menus[i].id+"' title='"+menus[i].name+"'>");
					   for(var j=0;j<menus.length;j++){
						   if(menus[j].parentid==menus[i].id){
							   $("#dv_addMenu").append("<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' name='menus_ids' value='"+menus[j].id+"' title='"+menus[j].name+"'>");
						   }
					   }
				   }
			   }
			   var permissions=obj.permissions;
			   for(var i=0;i<permissions.length;i++){
				   $("#dv_addPermission").append("<input type='checkbox' name='permission_ids' value='"+permissions[i].id+"' title='"+permissions[i].name+"'>");
			   }
			   
			   //------------------------------------------
			   
			   layui.use('table', function() {
					form=layui.form;
					layer.open({
						area: ['500px', '480px'],
						title: '添加角色',
						type: 1,
						content: $('#dvlay_add'), //这里content是一个普通的String
						btn: ['新增', '取消'],
						yes:function(index, layero){
							$.ajax({
								url:"${pageContext.request.contextPath}/role/add",
								type:"post",
								dataType:"json",
								data:$("#fm1_add").serialize(),  
								success:function(result){
									if(result==true){
										layer.msg("新增成功", {icon : 6});
									}else{
										layer.msg("新增失败", {icon : 5});
									}
								}
							});
							layer.close(index);//关闭窗口
						},
						cancel: function() {}
					});
		    });
			   
		   });
	   }
	   
	</script>
	
	
</body>
</html>


<div style="display: none;margin-top: 10px;width: 480px" id="dvlay_add">
    <form id="fm1_add" class="layui-form layui-form-pane" >
        <div class="layui-form-item" pane >
            <label class="layui-form-label">角色名称：</label>
            <div class="layui-input-inline">
                <input id="uid" name="name" class="layui-input">
            </div>
        </div>
         <div class="layui-form-item" pane >
            <label class="layui-form-label">角色备注：</label>
            <div class="layui-input-inline">
                <input id="uid" name="remark" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">菜单：</label>
            <div class="layui-input-inline" id="dv_addMenu">
                 
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">权限：</label>
            <div class="layui-input-inline" id="dv_addPermission">
                
            </div>
        </div>
    </form>
</div>



<div style="display: none;margin-top: 10px;width: 480px" id="dvlay_update">
    <form id="fm1_update" class="layui-form layui-form-pane" >
        <div class="layui-form-item" pane >
            <label class="layui-form-label">角色名称：</label>
            <div class="layui-input-inline">
                <input name="id" type="hidden" class="layui-input" id="id_update">
                <input name="name" class="layui-input" id="name_update">
            </div>
        </div>
         <div class="layui-form-item" pane >
            <label class="layui-form-label">角色备注：</label>
            <div class="layui-input-inline">
                <input name="remark" class="layui-input" id="remark_update">
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">菜单：</label>
            <div class="layui-input-inline" id="dv_updateMenu">
               
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">权限：</label>
            <div class="layui-input-inline" id="dv_updatePermission">
                
            </div>
        </div>
    </form>
</div>